import React, { useState } from 'react'
import Modal from './../modal'

import Header from '../../newsComponents/news-header'
import SwitchItem from './../../newsComponents/SwitchItem'

import './index.scss'


function Setting(props) {

  // 是否展示 modal
  const [showModal, setShowModal] = useState(false)

  const onDelete = (del) => {
    // 是否删除聊天记录, true为删除, false 为不删除
    console.log(del)
    // 关闭modal
    setShowModal(false)
  }


 

  
  const onClickHandle = (checked) => {
    console.log(checked)
  }
  return (
    <>
      <div className="container">
        <Header props={props} classNames='news_chat_settings_header' title='聊天设置' />

        <div className="content">
          <ul className='chat_setting_group'>
            <li>
              <img src="/images/HeadportraitStu.png" alt="" className='chat_setting_avatar' />
              <div className='chat_setting_info'>
                <strong>高三（9）班班级群</strong>
                <p>绍兴市实验高中-高三（9班）</p>
              </div>
            </li>

            <li className='chat_setting_item'>
              <strong>群二维码</strong>
              <img src="/images/QR-icon.png" alt="" />
            </li>

            <SwitchItem classNames='chat_setting_item' onClickHandle={onClickHandle} checked={false}>
            消息免打扰
            </SwitchItem>
            <SwitchItem classNames='chat_setting_item' onClickHandle={onClickHandle} checked>
            允许邀请加群
            </SwitchItem>
            <SwitchItem classNames='chat_setting_item' onClickHandle={onClickHandle} checked>
            可通过搜索加入本群
            </SwitchItem>

            
            <li className='chat_setting_item' onClick={() => {
              setShowModal(true)
            }}>
              <strong>清空聊天记录</strong>
              <img src="/images/nextArrow.png" alt="" style={{ width: '0.22rem', height: '0.38rem' }} />
            </li>
          </ul>


          <Modal showModal={showModal} onDelete={onDelete} />
        </div>
      </div>


    </>
  )
}

export default Setting